<template>
    <el-container class="broswer">
        <el-main class="broswerBox">
            <div class="col flex_center">
                <p style="font-size: 42px;font-weight: 500;color: #333333;">推荐浏览器</p>
                <p style="font-size: 28px;font-weight: 500;color: #1D2088;margin: 30px 0;">谷歌浏览器</p>
                <img src="/static/img/indexnew/chrom.png" style="width: 160px;height: 160px;">
                <a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank" class="downabtn">立即下载</a>，
            </div>
            <div class="row brosweLine flex_between" style="margin-top: 65px;justify-content: center;">
                <span></span>
                <p style="font-size: 42px;font-weight: 500;color: #333333;width: 260px;text-align: center;position: relative;top: -10px;">其他浏览器</p>
                <span></span>
            </div>
            <div class="flex_between" style="width: 90%;margin: 0 auto;">
                <div class="col flex_center" style="margin-left: 150px;">
                    <p style="font-size: 28px;font-weight: 500;color: #1D2088;margin: 30px 0;">火狐浏览器</p>
                    <img src="/static/img/indexnew/firefox.png" style="width: 160px;height: 160px;">
                    <a href="http://www.firefox.com.cn/download/" target="_blank" class="downabtn">立即下载</a>
                </div>
                <div class="col flex_center" style="margin-right: 150px;">
                    <p style="font-size: 28px;font-weight: 500;color: #1D2088;margin: 30px 0;">360浏览器（<span
                            style="color: #FF0000;">极速模式</span>）</p>
                    <img src="/static/img/indexnew/360.png" style="width: 160px;height: 160px;">
                    <a href="https://browser.360.cn/ee/" target="_blank" class="downabtn">立即下载</a>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>
</script>

<style>
    html,
    body {
        height: 100%;
    }

    #app {
        height: 100%;
    }

    .broswer {
        width: 100%;
        height: 100%;
        display: flex;
        flex: 1;
        /* padding: 0 100px; */
        /* padding-top: 30px; */
    }

    .col {
        display: flex;
        flex-direction: column;
    }

    .flex_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex_between {
        display: flex;
        justify-content: space-between;
    }

    .row {
        display: flex;
        flex-direction: row;
    }

    .broswerBox {
        /* overflow: hidden; */
        padding: 0px 100px;
        padding-top: 20px;
    }

    .brosweLine span {
        width: 500px;
        height: 2px;
        background: #CCCCCC;
        border-radius: 8px;
        position: relative;
        top: 18px;
    }

    .downabtn {
        width: 210px;
        height: 70px;
        background: #1D2088;
        border-radius: 8px;
        font-size: 32px;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        line-height: 70px;
        margin-top: 30px;
    }
</style>
